<template>
  <el-dialog v-model="dialogVisible" title="分配角色对话框" width="400" align-center>
    <template #default>
      <div class="db-form">
        <el-tree
          ref="treeRef"
          style="max-width: 600px"
          :data="data"
          show-checkbox
          default-expand-all
          node-key="id"
          highlight-current
        />
      </div>
    </template>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelAction()">取消</el-button>
        <el-button type="primary" @click="confrimAction()"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
export default {
  name: "EditUser",
  components: { ElMessage },
  props: {},
  data() {
    return {
      dialogVisible: false,
      data: [],
      userUuid: "",
      allowForm: {
        userUuids: "",
        roleIds: "",
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    cancelAction() {
      this.dialogVisible = false;
    },
    confrimAction() {
      this.dialogVisible = false;
      let idArray = [];
      idArray = this.$refs["treeRef"].getCheckedKeys();
      this.allowForm.roleIds = idArray.join(",");
      axios
        .post("/api/user/saveRoleByUser", this.allowForm)
        .then((data) => {
          //   console.info(`deleteUserRecycleById success:${data.data}`);
          if (data.data.success) {
            ElMessage.success(data.data.msg);
            this.dialogVisible = false;
          } else {
            ElMessage.error(data.data.msg);
          }
        })
        .catch(() => {
          ElMessage.error("请联系管理员");
        });
    },
    queryELTree() {
      axios
        .post("/api/user/queryRoleTreeByUser", {
          userUuid: this.userUuid,
        })
        .then((data) => {
          // console.info(`queryRoleTreeByUser success:${data.data}`);
          this.data = [];
          this.data = [...data.data.dateList];
          this.$refs["treeRef"].setCheckedKeys(data.data.checkedList);
        })
        .catch(() => {
          ElMessage.error("请联系管理员");
        });
    },
  },
  mounted() {
    let that = this;
    this.$bus.on("allowRoleDialog", (data) => {
      this.dialogVisible = true;
      that.userUuid = data;
      that.allowForm.userUuids = data;
      that.queryELTree();
    });
  },
  unmounted() {
    this.$bus.off("allowRoleDialog");
  },
};
</script>

<style lang="scss"></style>

<style lang="scss" scoped>
.db-form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 100px;
}
</style>

<style></style>
